<template>
  <div style="display: none">
    <div id="printMe">
      <div
        style="
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding: 5px 0;
        "
        v-for="item in multipleSelection"
        :key="item.washCode"
      >
        <div v-if="item.washType !== '普洗'">
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
        </div>
        <div style="display: flex; justify-content: center; width: 50%">
          <QrcodeVue :value="item.washCode" :size="64" />
        </div>

        <div
          style="flex: 1; margin-left: 10px; font-size: 12px; line-height: 16px"
        >
          <div>手机号码：{{ phone }}</div>
          <div>{{ item.washCode }}</div>
          <div>
            类型：{{ item.washType }}
            <span style="margin-left: 20px">{{ item.index }}</span>
          </div>
          <div>
            刷鞋匠(货架号)：{{ item.srgCode }}

            <span
              style="margin-left: 20px"
              v-if="customerDetail && customerDetail.remark"
            >
              {{ customerDetail.remark }}
            </span>
          </div>
        </div>
        <div v-if="item.washType !== '普洗'">
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <button ref="printBtn" @click="setTime" v-print="printObj"></button>
  </div>
</template>

<script>
import { formatDateTime } from "@/utils/formate";
import QrcodeVue from "qrcode.vue";
export default {
  props: ["multipleSelection", "phone", "customerDetail"],
  components: {
    QrcodeVue,
  },
  data() {
    return {
      printObj: {
        id: "printMe",
        popTitle: "水洗码",
      },
      printTime: "",
    };
  },

  methods: {
    formatDateTime,
    setTime() {
      this.printTime = formatDateTime(
        new Date().getTime(),
        "YYYY-MM-DD HH:mm:ss"
      );
    },
  },
};
</script>
